<template lang="html">
  <div class="article-detail">
    <div class="container">
      <el-button type="primary" @click="goBack">返回</el-button>
      <h2>{{detail.title}}</h2>
      <p class="triple">
        <span>创建时间:{{detail.createdAt | timeFormat}}</span>
        <span>更新时间:{{detail.updatedAt |timeFormat}}</span>
        <span>阅读量:{{detail.readingAmount}}</span>
      </p>
      <div class="contents" v-html="detail.content"></div>
    </div>
  </div>
</template>

<script>
import {getDetail} from 'api/article.js'

import {loadToken} from 'common/js/cache.js'

export default {
  data() {
    return {
      currentId: '',
      detail: {}
    }
  },
  created() {
    this.currentId = this.$route.params.id
    this._getDetail(this.currentId)
  },
  methods: {
    _getDetail(id) {
      getDetail(id, loadToken()).then((res) => {
        this.detail = res
      })
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss">
.article-detail{
  padding:20px;
  margin-left: 20px;
  border-radius: 5px;
  border:1px solid #ccc;
  margin-bottom: 80px;
  .container{
    width: 100%;
    display: block;
    h2{
      font-size: 34px;
      text-align: center;
      margin-bottom: 50px;
    }
    .triple{
      text-align: right;
      padding-bottom: 20px;
      span{
        padding-left: 20px;
      }
    }
    .contents{
      font-size: 20px;
      line-height: 36px;
      p{
        padding:10px 0;
        text-indent: 40px;
      }
      img{
        width: 360px;
      }
    }
  }
}
</style>
